<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="handleDialogClose"
    modal-append-to-body
    lock-scroll
    class="subcribe-common-dialog normal-common-dialog-size"
  >
    <div class="dialog-container">
      <DialogTitle style="margin-bottom: 12px">修改记录</DialogTitle>
      <el-table
        v-if="recordList.length"
        :data="recordList"
        class="fb-table"
        element-loading-text="加载中..."
        empty-text="暂无数据"
        max-height="350"
        header-cell-class-name="order-data-header-cell"
        fit
        hightlight-current-row
      >
        <el-table-column align="center" label="审批单号" min-width="160">
          <template slot-scope="scope">
            <div v-if="scope.row.approvalNumber" style="cursor:pointer;color:#406EFF;" @click="toModifyDetail(scope.row)">
              <ToolTip :content="scope.row.approvalNumber" />
            </div>
            <div v-else>--</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="修改说明" width="120">
          <template slot-scope="scope">
            <el-tooltip v-if="scope.row.desc" :open-delay="800" placement="top" effect="dark">
              <div slot="content" style="max-width: 200px;">{{ scope.row.desc }}</div>
              <div class="ellipsis">{{ scope.row.desc }}</div>
            </el-tooltip>
            <div v-else>--</div>
          </template>
        </el-table-column>
        <el-table-column align="left" label="审批进度" min-width="80">
          <template slot-scope="scope">
            <div v-if="scope.row.approvalStatus || scope.row.approvalStatus === 0" style="display:flex;align-items:center">
              <div :class="`color-${scope.row.approvalStatus}`" class="dot"/>
              <div>{{ scope.row.approvalStatus | supplierModifyStatus }}</div>
            </div>
            <div v-else>--</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="审批人" min-width="80">
          <template slot-scope="scope">
            <el-tooltip v-if="scope.row.approverName" :open-delay="800" placement="top" effect="dark">
              <div slot="content" style="max-width: 200px;">{{ scope.row.approverName }}</div>
              <div class="ellipsis">{{ scope.row.approverName }}</div>
            </el-tooltip>
            <div v-else>--</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="发起人" min-width="80">
          <template slot-scope="scope">
            <el-tooltip v-if="scope.row.initiator" :open-delay="800" placement="top" effect="dark">
              <div slot="content" style="max-width: 200px;">{{ scope.row.initiator }}</div>
              <div class="ellipsis">{{ scope.row.initiator }}</div>
            </el-tooltip>
            <div v-else>--</div>
          </template>
        </el-table-column>
        <el-table-column :align="showMobilePage ? 'left' : 'center'" label="创建时间" width="180">
          <template slot-scope="scope">
            <div v-if="scope.row.createTime">{{ scope.row.createTime / 1000 | standardFormat('YYYY/MM/DD HH:mm:ss') }}</div>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column :align="showMobilePage ? 'left' : 'center'" :width="operateWidth" fixed="right" label="操作">
          <template slot-scope="scope">
            <template v-if="!showMobilePage">
              <el-button type="text" @click="toModifyDetail(scope.row)"><span style="font-size:14px;">查看</span></el-button>
              <el-button v-if="scope.row.approvalStatus === SUPPLIER_MODIFY_STATUS.REJECTED" class="action-del-btn" type="text" @click="modifyRecordDelete(scope.row.id)"><span style="font-size:14px;">删除</span></el-button>
              <el-button v-else class="action-del-btn" type="text"><span style="font-size:14px; color: #ddd; cursor: default">删除</span></el-button>
            </template>
            <tableOperateBtn v-else :is-hide-on-click="false">
              <el-dropdown-item @click.native="toModifyDetail(scope.row)">
                <div>查看</div>
              </el-dropdown-item>
              <el-dropdown-item v-if="scope.row.approvalStatus === SUPPLIER_MODIFY_STATUS.REJECTED" @click.native="modifyRecordDelete(scope.row.id)">
                <div>删除</div>
              </el-dropdown-item>
              <el-dropdown-item :disabled="true">
                <div>删除</div>
              </el-dropdown-item>
            </tableOperateBtn>
          </template>
        </el-table-column>
      </el-table>
      <div v-else class="record-empty">
        <img :src="EmptyImg" alt="暂无数据">
        <div>暂无修改记录</div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import DialogTitle from '@/components/Title';
import EmptyImg from '@/assets/empty-table-data.png';
import { showModal } from '@/utils/message';
import { standardFormat } from '@/filters/date';
import { supplierModifyStatus } from '@/filters/status';
import { recordInfo, supplierRecordDelete } from '@/api/supplier';
import { SUPPLIER_MODIFY_STATUS, SUPPLIER_DETAIL_TYPE } from '@/utils/const/supplier';
import { mapState } from 'vuex';
import mobileTable from '@/mixins/mobileTable';

export default {
  name: 'ModifyRecord',
  components: {
    DialogTitle
  },
  filters: {
    standardFormat,
    supplierModifyStatus
  },
  mixins: [mobileTable],
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    id: {
      type: [Number, String],
      default: ''
    }
  },
  data() {
    return {
      SUPPLIER_MODIFY_STATUS,
      EmptyImg,
      dialogVisible: false,
      recordList: []
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  methods: {
    initRecord() {
      this.dialogVisible = true;
      this.queryRecordList();
    },
    queryRecordList() {
      recordInfo(this.id).then(res => {
        this.recordList = res.data;
      });
    },
    // 跳转修改审批单详情
    toModifyDetail(data) {
      this.handleDialogClose();
      const routeUrl = this.$router.resolve({
        name: 'supplierManageDetail',
        query: { type: SUPPLIER_DETAIL_TYPE.MODIFY },
        params: { id: data.id }
      });
      routeUrl && window.open(routeUrl.href, '_blank');
    },
    modifyRecordDelete(id) {
      if (!id) {
        this.$message.warning('无法获取ID');
        return;
      }
      showModal('确定删除吗？', '', {}).then(_ => {
        supplierRecordDelete(id).then(_ => {
          // this.handleDialogClose();
          this.$message.success('删除成功');
          this.queryRecordList();
        });
      });
    },
    handleDialogClose() {
      this.dialogVisible = false;
    }
  }
};
</script>

<style lang="scss" scoped>
$bgc: #FFBC3D 0,#31CC9C 1,#FF4E5F 2;
.dialog-container {
  margin-bottom: 32px;
  .record-empty {
    width: 100%;
    text-align: center;
    margin: 24px 0;
    color: #999;
    > img {
      width: 112px;
      margin-bottom: 8px;
    }
  }
  .action-del-btn {
    color: #FF4E5F;
    border-left: 1px solid #DDD;
    margin: 0;
    padding-left: 6px;
    border-radius: inherit;
  }
  .dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    margin-right: 5px;
    @each $c, $i in $bgc {
      &.color-#{$i} {
        background: $c;
      }
    }
  }
}
</style>
